<template>
  <div class="modal">
    <el-dialog v-model="dialogVisible" title="加入购物车" width="30%" @close="closeDialog">
      <div class="product-box">
        <div class="bold">{{ product.serverType || "无" }}</div>
        <div class="bold">{{ product.serverName || "无" }}</div>
        <div class="flex">
          <div>
            <div>CPU : {{ product.cpu || "无" }}</div>
            <div>硬盘 : {{ product.hardDisk || "无" }}</div>
            <div>防御 : {{ product.defense || "无" }}</div>
            <div>
              费用 :
              <span class="red"
                >￥{{ product.price || 0 }}元/{{ getMode(product.billingMode) }}</span
              >
            </div>
          </div>
          <div>
            <div>内存 : {{ product.memory || "无" }}</div>
            <div>带宽 : {{ product.bandWidth || "无" }}</div>
            <div>IP : {{ product.ip || "无" }}</div>
            <div>
              数量 :
              <el-input-number v-model="periodNum" step-strictly :min="1" />
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="flex">
          <div class="size20">
            总计：<span class="red">{{ countPrice || 0 }}元</span>
          </div>
          <span>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue";
import { ElMessage } from "element-plus";

import { shoppingCar } from "@/api/cloud/index";

const props = defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false,
  },
  // 产品信息
  product: {
    type: Object,
    default: () => {},
  },
  // 类型
  shoppingCarEnums: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed(() => props.show); // 控制弹窗显示
const countPrice = computed(() => (Number(props.product.price) * periodNum.value).toFixed(2));

const periodNum = ref(1); // 购买数量
const modeList = ref([
  { label: "次", value: 0 },
  { label: "天", value: 1 },
  { label: "月", value: 30 },
  { label: "年", value: 365 },
]);

// 关闭弹窗
const closeDialog = () => {
  periodNum.value = 1;
  emits("update:show", false);
};

// 获取计费方式
const getMode = (val: number) => {
  let row = modeList.value.find((item) => item.value == val);
  return row ? row.label : "";
};

// 提交订单
const handleConfirm = () => {
  let data = <any>{
    shoppingCarEnums: props.shoppingCarEnums,
    relationId: props.product.govId,
    periodNum: periodNum.value,
  };
  shoppingCar(data).then((res: any) => {
    if (res.code == 200) {
      ElMessage.success("加入购物车成功,请前往控制台查看");
      closeDialog();
    }
  });
};
</script>

<style lang="less" scoped>
.product-box {
  padding: 0 20px;
  line-height: 30px;
  .bold {
    font-weight: 600;
  }
}
.flex {
  display: flex;
  justify-content: space-between;
  > div {
    text-align: left;
    flex: 1;
  }
}
.size20 {
  font-size: 20px;
}
.red {
  color: #f00;
}
</style>
